<template>
  <MyVanskeleton :loading="skeletonLoading">
    <template v-slot:my-content>
      <div class="company-style">
        <!-- 导航栏 start -->
        <van-nav-bar
          :title="basicInfo.PersonName + '的简历'"
          left-arrow
          fixed
          @click-left="onClickLeft"
        >
          <template #right>
            <van-icon
              :name="isCollect ? 'star' : 'star-o'"
              :color="isCollect ? '#f70' : ''"
              size="22"
              style="margin-right: 15px"
              @click="collectResume"
            />
            <!-- <van-icon name="share-o" size="22" @click="share"/> -->
          </template>
        </van-nav-bar>
        <!-- 导航栏 end -->

        <!-- 内容 start -->
        <div class="content-top resume-perview">
          <!-- 基本信息 -->
          <div class="module" v-if="basicInfo">
            <div class="basic">
              <p class="name">
                <b>{{ basicInfo.PersonName }}</b>
                <span>简历更新：{{ basicInfo.ResumeUpdateDateStr }}</span>
                <img :src="basicInfo.HeadImgUrl" alt="" />
              </p>
              <p class="info01">
                <span>{{ basicInfo.Sex }}</span>
                <span>{{ basicInfo.Age }}岁</span>
                <span>{{ basicInfo.Edu }}</span>
                <span>{{ basicInfo.WorkYears }}</span>
              </p>
              <p class="info02">
                <span class="mz">{{ basicInfo.Nation }}</span>
                <span class="zzmm">{{ basicInfo.Politics }}</span>
                <span class="hy">{{ basicInfo.MaritalStaus }}</span>
                <span class="hj">{{ basicInfo.RegAddr }}</span>
                <span class="jzd">{{ basicInfo.Dwell }}</span>
                <span class="byyx">{{ basicInfo.School }}</span>
                <span class="sxzy">{{ basicInfo.Specialty }}</span>
                <span class="bysj">{{ basicInfo.GraduateTimeStr }}</span>
              </p>
            </div>
            <div class="remark">
              <label> <van-icon name="label" />备注 </label>
              <!-- 备注前 -->
              <p class="no" v-if="!basicInfo.Remark">
                <span @click="popupShowRemark = true">可添加对此人的备注</span>
              </p>
              <!-- 备注后 -->
              <p class="yes" v-else>
                <span>{{ basicInfo.Remark }}</span>
                <sub @click="popupShowRemark = true">修改</sub>
              </p>
            </div>
          </div>
          <!-- 保密显示 -->
          <div v-if="isBM && !isReceive" class="privary-hint" style="">
            <span data-v-0726d15e=""
              >保密简历只显示部分信息，您可在线和Ta沟通</span
            >
          </div>
          <div v-else>
            <!-- 简历反馈 -->
            <div v-if="false" class="module" style="padding: 12px 16px">
              <div class="feedback">
                <!-- 未填写 -->
                <div class="no">
                  <p>
                    <b>该简历是否符合您的招聘要求</b>
                    <span>即时处理简历将提高您的职位排名</span>
                    <span>处理结果将反馈给求职者</span>
                  </p>
                  <van-button plain color="#f70" text="立即处理"></van-button>
                </div>

                <!-- 已填写 -->
                <!-- <div class="yes">
            <p>
              <b>该简历是否符合您的招聘要求</b>
              <span>不合适</span>
            </p>
          </div> -->
              </div>
            </div>
            <!-- 求职意向 -->
            <div class="module" v-if="jwInfo">
              <p class="tab">求职意向</p>
              <div class="box hope">
                <p>
                  <label>性质</label>
                  <span>{{ jwInfo.job_Type }}</span>
                </p>
                <p>
                  <label>薪资</label>
                  <span>{{ jwInfo.salaryValue }}</span>
                </p>
                <p>
                  <label>行业</label>
                  <span>{{ jwInfo.tradesValueStr }}</span>
                </p>
                <p>
                  <label>职位</label>
                  <span>{{ jwInfo.positionsValueStr }}</span>
                </p>
                <p>
                  <label>地区</label>
                  <span>{{ jwInfo.areasValueStr }}</span>
                </p>
              </div>
            </div>
            <!-- 联系方式 -->
            <div class="module">
              <p class="tab">联系方式</p>
              <div class="box contact">
                <!-- 获取前 -->
                <p v-if="!basicInfo.canReadTel">
                  <b>未获取</b>
                  <span @click="getLink">获取号码</span>
                </p>
                <!-- 获取后 -->
                <p v-else>
                  <b>{{ basicInfo.MobileNum }}</b>
                  <span @click="toCall(basicInfo.MobileNum)">拨打电话</span>
                </p>
              </div>
            </div>
            <!-- 教育培训 -->
            <div class="module" v-if="eduList.length > 0">
              <p class="tab">教育培训</p>
              <ul class="box list02">
                <li v-for="(item, index) in eduList" :key="index">
                  <b>{{ item.school_Na }}</b>
                  <span
                    >{{ item.level_EduValue }} | {{ item.specialtyValue }}</span
                  >
                  <span>{{ item.fmDate }}</span>
                  <span class="profile" v-if="item.content != ''">{{
                    item.content
                  }}</span>
                </li>
              </ul>
            </div>
            <!-- 工作经历 -->
            <div class="module" v-if="workList.length > 0">
              <p class="tab">工作经历</p>
              <ul class="box list02">
                <li v-for="(item, index) in workList" :key="index">
                  <b>{{ item.company_Na }}</b>
                  <span v-if="item.company_TypeValue && item.trade_Value"
                    >{{ item.company_TypeValue }} | {{ item.trade_Value }}</span
                  >
                  <span v-if="item.fmDate">{{ item.fmDate }}</span>
                  <b v-if="item.position_Value">{{ item.position_Value }}</b>
                  <span class="profile">{{ item.content }}</span>
                </li>
              </ul>
            </div>
            <!-- 自我评价 -->
            <div class="module" v-if="evaluationInfo">
              <p class="tab">自我评价</p>
              <div class="box myself">
                <span>{{ cEvaluation }}</span>
                <sub v-if="cIsEvaluationNeedExpand" @click="showEvaluationAll"
                  >查看全部</sub
                >
              </div>
            </div>
            <!-- 专业技能 -->
            <div class="module" v-if="skillList.length > 0">
              <p class="tab">专业技能</p>
              <ul class="box list01">
                <li v-for="(item, index) in skillList" :key="index">
                  <span>{{ item.skill_Name }}</span>
                  <i></i>
                  <span>{{ item.skill_level }}</span>
                </li>
              </ul>
            </div>
            <!-- 获得证书 -->
            <div class="module" v-if="licenseList.length > 0">
              <p class="tab">获得证书</p>
              <ul class="box list01">
                <li v-for="(item, index) in licenseList" :key="index">
                  <span>{{ item.license_Name }}</span>
                  <i></i>
                  <span>{{ item.date_Time }}</span>
                </li>
              </ul>
            </div>
            <!-- 附加信息 -->
            <div class="module" v-if="addList.length > 0">
              <p class="tab">附加信息</p>
              <ul class="box list03">
                <li v-for="(item, index) in addList" :key="index">
                  <b>{{ item.t_Name }}</b>
                  <span>{{ item.information }}</span>
                </li>
              </ul>
            </div>

            <!-- 附件简历 -->
            <div class="module" v-if="true">
              <p class="tab">附件简历</p>
              <div class="box annex">
                <span>周建军的简历</span>
                <span>预览</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容 end -->

        <!-- 底部按钮 start -->
        <div class="resume-perview-btn">
          <van-button
            v-if="isReceive"
            type="primary"
            color="#f70"
            text="通知面试"
            @click="faceNotice"
          ></van-button>
          <van-button
            type="primary"
            color="#07f"
            text="在线沟通"
            @click="chat"
          ></van-button>
        </div>
        <!-- 底部按钮 end -->

        <!-- 弹框操作 start -->
        <van-popup v-model="popupShowRemark" class="resume-perview-popu">
          <b>填写备注</b>
          <ul class="type01">
            <li
              :class="{ active: markIndex == 0 }"
              @click="chooseMark(0, '已通知面试')"
            >
              已通知面试
            </li>
            <li
              :class="{ active: markIndex == 1 }"
              @click="chooseMark(1, '已找到工作')"
            >
              已找到工作
            </li>
            <li
              :class="{ active: markIndex == 2 }"
              @click="chooseMark(2, '不适合')"
            >
              不适合
            </li>
            <li
              :class="{ active: markIndex == 3 }"
              @click="chooseMark(3, '其他')"
            >
              其他
            </li>
          </ul>
          <p v-if="markIndex == 3">
            <van-field
              v-model="mark"
              rows="5"
              autosize
              type="textarea"
              maxlength="20"
              show-word-limit
              placeholder="选择“其他”时，请填写备注内容"
              class="text"
            />
          </p>
          <p>
            <van-button
              round
              type="primary"
              text="取消"
              class="btn"
              @click="popupShowRemark = false"
            ></van-button>
            <van-button
              round
              type="primary"
              text="保存"
              class="btn"
              @click="addRemark"
            ></van-button>
          </p>

          <!-- <b>填写反馈（该简历是否符合您的要求）</b>
      <ul class="type02">
        <li class="active">符合</li>
        <li>不符合</li>
        <li>自定义</li>
      </ul>
      <p>
        <van-field rows="5" autosize type="textarea" maxlength="500" show-word-limit placeholder="选择“自定义”时，请填写反馈内容" class="text" />
      </p>
      <p>
        <van-button round type="primary" text="取消" class="btn"></van-button>
        <van-button round type="primary" text="保存" class="btn"></van-button>
      </p> -->
        </van-popup>
        <!-- 弹框操作 end -->
      </div>
    </template>
  </MyVanskeleton>
</template>

<script>
import { NavBar, Icon, Button, Popup, Field, List, Toast } from "vant";
import MyVanskeleton from "@/components/MyVanskeleton.vue";
import { mixin_all } from "@/mixin/mixins";
import { returnToPhoneWithData } from "@/util/phone";
export default {
  name: "ResumeInfo",
  components: {
    MyVanskeleton,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Button.name]: Button,
    [Popup.name]: Popup,
    [Field.name]: Field,
    [List.name]: List,
  },
  mixins: mixin_all,
  // 定义属性
  data() {
    return {
      isReceive: false, //是否投递
      isCollect: false, //是否收藏
      isBM: false,
      //params
      personID: "",
      //data from api
      basicInfo: {},
      jwInfo: {},
      eduList: [],
      workList: [],
      evaluationInfo: {},
      cEvaluation: "",
      cIsEvaluationNeedExpand: false,
      skillList: [],
      licenseList: [],
      addList: [],
      //remark
      popupShowRemark: false,
      mark: "",
      markIndex: 0,
      //skeleton
      skeletonLoading: true,
    };
  },
  mounted() {
    this.personID = this.$route.query.personID;
    this.resumeOrigin = this.$route.query.resumeOrigin;
    this.isReceive = this.resumeOrigin == 0;
    this.getBasicInfo();
    this.isCollectResume();
  },
  // 方法集合
  methods: {
    getBasicInfo() {
      this.$api
        .get("/CompanyResume/GetResumeAll", {
          personID: encodeURI(this.personID),
        })
        .then((res) => {
          this.skeletonLoading = false;
          if (res.success) {
            this.basicInfo = res.response.basicInfo;
            this.isReceive = this.basicInfo.isApply;
            this.isBM = this.basicInfo.RegStatue == "保密";
            this.jwInfo = res.response.jwInfo;
            this.eduList = res.response.eduList;
            this.workList = res.response.workList;
            this.evaluationInfo = res.response.evaluationInfo;
            if (this.evaluationInfo) {
              this.cIsEvaluationNeedExpand =
                this.evaluationInfo.evaluation.length > 100;
              this.cEvaluation = this.cIsEvaluationNeedExpand
                ? this.evaluationInfo.evaluation.substring(0, 100) + "..."
                : this.evaluationInfo.evaluation;
            }
            this.skillList = res.response.skillList;
            this.licenseList = res.response.licenseList;
            this.addList = res.response.addList;
          }
        });
    },
    isCollectResume() {
      this.$api
        .get("/CompanyResume/IsCollect", { personID: this.personID })
        .then((res) => {
          if (res.success) {
            this.isCollect = res.response;
          } else {
            Toast.fail(res.msg);
          }
        });
    },
    showEvaluationAll() {
      this.cIsEvaluationNeedExpand = false;
      this.cEvaluation = this.evaluationInfo.evaluation;
    },
    getLink() {
      this.$api
        .get("/CompanyResume/GetLink", { personID: this.personID })
        .then((res) => {
          if (res.success) {
            var data = res.response;
            this.basicInfo.MobileNum = data.phone;
            this.basicInfo.PersonName = data.personName;
            this.basicInfo.QQ = data.qq;
            this.basicInfo.Email = data.email;
            this.basicInfo.isConfuse = true;
          } else {
            Toast.fail(res.msg);
          }
        });
    },
    chooseMark(index, content) {
      this.markIndex = index;
      this.mark = content;
    },
    addRemark() {
      this.$api
        .post("/CompanyResume/AddRemark", {
          content: this.mark,
          personID: this.personID,
        })
        .then((res) => {
          if (res.success) {
            Toast.success("添加成功");
            this.basicInfo.Remark = this.mark;
            this.popupShowRemark = false;
          } else {
            Toast.fail(res.msg);
          }
        });
    },
    chat() {
      //创建聊天会话
      this.$api
        .post(
          "/CompanyIM/CreateConversationByCompany?personID=" + this.personID
        )
        .then((res) => {
          if (res.success) {
            this.$router.push({
              name: "company-im-window",
              query: {
                cid: res.response,
                personID: this.personID,
                origin: "resume",
              },
            });
          } else {
            Toast.fail("创建聊天失败");
          }
        });
    },
    onClickLeft() {
      this.$router.back();
    },
    faceNotice() {
      this.$router.push({
        name: "company-resume-interview",
        query: { personID: this.personID },
      });
    },
    collectResume() {
      this.$api
        .post("/CompanyResume/CollectResume?personID=" + this.personID)
        .then((res) => {
          Toast(res.msg);
          if (res.success) {
            this.isCollect = res.response;
          }
        });
    },
    share() {
      // // console.log(this.jobinfo);
      // let title = this.basicInfo.personName;
      // let content = "找工作，就上舟山人才网（93job.com）";
      // returnToPhoneWithData({
      //   action: "share",
      //   title,
      //   content,
      //   url: Global.share_person_url + `/Q/StationInfo.aspx?StationID=${this.jobid}`,
      // });
    },
    toCall(phone) {
      returnToPhoneWithData({ action: "call", tel: phone });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/index.less";
@import "@/assets/css/company.less";
@import "@/assets/css/company.css";
</style>